/** 关键字*/
<script lang="ts">
export default {
  name: "keyword",
};
</script>
<template>
  <div class="page-box h100 display-flex czbj">
    <div class="">
      <n-form ref="formRef" inline size="normal">
        <n-form-item>
          <n-input
            v-model:value="searchkey"
            placeholder="请输入关键字"
            size="medium"
          />
        </n-form-item>
        <n-form-item>
          <n-dropdown trigger="hover" @select="handleSelect" :options="options">
            <span class="red gengser sz"
              >更多利好关键字<i class="iconfont dx-xiala"></i
            ></span>
          </n-dropdown>
        </n-form-item>
        <n-form-item>
          <n-button type="error" size="medium" @click="initData">查询</n-button>
        </n-form-item>
      </n-form>
    </div>
    <n-spin :show="show">
      <n-data-table
        size="small"
        :row-props="rowProps"
        class="mt10"
        :max-height="600"
        :row-class-name="rowClassName"
        :pagination="paginationReactive"
        :columns="columns"
        :data="tableData"
        :single-line="false"
        remote
        @update:page="handlePageChange"
      />
    </n-spin>
  </div>
</template>
<script lang='ts' setup>
import { h, ref, computed, reactive } from "vue";
import store from "../../store";
import { dxget } from "../../util/index";
import comp from "../../components/index";
import { hf, transferTimeYMD } from "../../util/index";
let loading = ref(true);
let searchkey = ref("特定对象发行股票");
let pageSize = ref(15);
let tableData = ref([]);
let show = ref(false);
let options = [
  {
    label: "特定对象发行股票",
    key: "特定对象发行股票",
  },
  {
    label: "增资扩股暨",
    key: "增资扩股暨",
  },
  {
    label: "获得政府补助",
    key: "获得政府补助",
  },
  {
    label: "完成经营范围工商变更登记的公告",
    key: "完成经营范围工商变更登记的公告",
  },
  {
    label: "变更公司名称",
    key: "变更公司名称",
  },
];
const handleSelect = (e) => {
  searchkey.value = e;
  initData();
};
const paginationReactive = reactive({
  page: 1,
  pageCount: 1,
  pageSize: 15,
});
const rowKey = (rowData) => {
  console.log(rowData.announcementId);
  return rowData.announcementId;
};
let columns = [
  {
    title: "股票号码",
    key: "secCode",
    align: "center",
    width: 90,
  },
  {
    title: "公告标题",
    key: "announcementTitle",
    width: 500,
    render(row) {
      return h(comp.TextoutHtml, {
        dxtext: row.announcementTitle,
      });
    },
  },
  {
    title: "当前价格",
    key: "f2",
    align: "center",
  },
  {
    title: "涨幅%",
    key: "f3",
    align: "center",
    render(row) {
      return h(
        "div",
        {},
        {
          default: () => row.f3 + "%",
        }
      );
    },
  },
  {
    title: "振幅%",
    key: "f7",
    align: "center",
    render(row) {
      return h(
        "div",
        {},
        {
          default: () => row.f7 + "%",
        }
      );
    },
  },
  {
    title: "涨幅金额",
    key: "f4",
    align: "center",
  },
  {
    title: "金额(亿)",
    key: "f6",
    align: "center",
    render(row) {
      return h(
        "div",
        {},
        {
          default: () => (row.f6 / 100000000).toFixed(2),
        }
      );
    },
  },
  {
    title: "更新时间",
    align: "center",
    width: 140,
    key: "announcementTime",
    render(row) {
      return h(
        "div",
        {},
        {
          default: () => transferTimeYMD(row.announcementTime),
        }
      );
    },
  },
  {
    title: "操作",
    align: "center",
    key: "actions",
    render(row) {
      return h(comp.MoreOperations, {
        obj: [
          {
            label: "添加公告观察",
            key: "8",
          },
        ],
        rowData: row,
        onOperateFun: () => {
          show.value = false;
        },
        onShowLoad: () => {
          show.value = true;
        },
      });
    },
  },
];
const rowClassName = (row, index) => {
  if (row.f3 >= 0) {
    return "red";
  }
  return "ls";
};
const currentTime = computed(() => {
  return store.state.currentTime;
});
const initData = async () => {
  const { data }: any = await dxget("gupiao/jucao", {
    searchkey: searchkey.value,
    pageNum: paginationReactive.page,
    pageSize: pageSize.value,
  });
  tableData.value = data.announcements;
  loading.value = false;
  paginationReactive.pageCount = data.totalpages;
};
initData();
const handlePageChange = (page) => {
  paginationReactive.page = page;
  initData();
};
const rowProps = (row, aa) => {
  return {
    style: "cursor: pointer;",
    onClick: (idx) => {
      hf("stockDetails", {
        code: row.f12,
        observetype: 8,
        ew: row.announcementTitle,
      });
    },
  };
};
</script>
<style scoped>
</style>
